<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 10
}

#map_canvas {
	height: 80%;
	border: 1px solid black;
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD3xl5q7sL1u7amk2C_bjQeuF1epVtWQyg&sensor=false">
	
</script>
<script type="text/javascript">
	var map;
	var geocoder;
	var director;
	var directionsDisplay;
	var elevator;
	var infowindow;
	function initialize() {
		geocoder = new google.maps.Geocoder();
		director = new google.maps.DirectionsService();
		directionsDisplay = new google.maps.DirectionsRenderer();
		elevator = new google.maps.ElevationService();
		infowindow = new google.maps.InfoWindow();
		var latlng = new google.maps.LatLng(39.904214, 116.40741300000002);
		var myOptions = {
			zoom : 8,
			center : latlng,
			//mapTypeId : google.maps.MapTypeId.ROADMAP
			mapTypeId : google.maps.MapTypeId.TERRAIN
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
		directionsDisplay.setMap(map);
		google.maps.event.addListener(map, 'zoom_changed', function() {
			//setTimeout(moveToDarwin, 3000);
		});
		var marker = new google.maps.Marker({
			position : latlng,
			map : map,
			title : "Hello World!"
		});
		google.maps.event.addListener(marker, 'click', function(event) {
			map.setCenter(event.latLng);
			map.setZoom(11);
		});
		google.maps.event.addListener(map, 'click', getElevation);
	}
	function moveToDarwin() {
		var darwin = new google.maps.LatLng(-12.461334, 130.841904);
		map.setCenter(darwin);
	}
	function getAddress() {
		var address = document.getElementById("address").value;
		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map : map,
					position : results[0].geometry.location
				});
			} else {
				alert("Geocode was not successful for the following reason: "
						+ status);
			}
		});
	}
	function calcRoute() {
		var start = document.getElementById("start").value;
		var end = document.getElementById("end").value;
		var request = {
			origin : start,
			destination : end,
			travelMode : google.maps.DirectionsTravelMode.DRIVING
		};
		director.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			}
		});
	}
	function getElevation(event) {
		var locations = [];
		locations.push(event.latLng);
		var positionalRequest = {
			'locations' : locations
		}
		elevator.getElevationForLocations(positionalRequest, function(results,
				status) {
			if (status == google.maps.ElevationStatus.OK) {
				if (results[0]) {
					infowindow.setContent("Elevation : " + results[0].elevation
							+ " meters.");
					infowindow.setPosition(event.latLng);
					infowindow.open(map);
				} else {
					alert("No results found");
				}
			} else {
				alert("Elevation service failed due to: " + status);
			}
		});
	}
</script>
</head>
<body onload="initialize()">
	<div>
		<input id="address" type="textbox" value="Beijing, Beijing"> <input
			type="button" value="Encode" onclick="getAddress()">
	</div>
	<div>
		<b>Start: </b> <select id="start" onchange="calcRoute();">
			<option value="beijing beijing">Beijing</option>
			<option value="tianjin, tianjin">Tianjin</option>
		</select> <b>End: </b> <select id="end" onchange="calcRoute();">
			<option value="beijing beijing">Beijing</option>
			<option value="tianjin, tianjin">Tianjin</option>
		</select>
	</div>
	<div id="map_canvas" style="width: 80%; height: 80%;"></div>
	<div id="elevation_chart" style="width: 640px; height: 200px;"></div>
</body>
</html>